<template>
    <div class="mainPage">
        <div class="content">
            <el-form ref="addOrEditForm" :model="addOrEditForm" :rules="addOrEditRules" label-width="120px"
                style="padding-right: 20px">
                <el-form-item label="用户账号" prop="account">
                    <el-input v-model="addOrEditForm.account" @input="
                        addOrEditForm.account = verifyfilter(
                            'char',
                            addOrEditForm.account
                        )
                        " placeholder="请输入用户账号" style="width: 100%" clearable></el-input>
                </el-form-item>
                <el-form-item label="用户名称" prop="name">
                    <el-input v-model="addOrEditForm.name" @input="
                        addOrEditForm.name = verifyfilter(
                            'char',
                            addOrEditForm.name
                        )
                        " placeholder="请输入用户名称" style="width: 100%" clearable></el-input>
                </el-form-item>
                <el-form-item label="地址" prop="address">
                    <el-input v-model="addOrEditForm.address" @input="
                        addOrEditForm.address = verifyfilter(
                            'char',
                            addOrEditForm.address
                        )
                        " placeholder="请输入地址" style="width: 100%" clearable></el-input>
                </el-form-item>
                <el-form-item label="电话"  prop="phone">
                    <el-input v-model="addOrEditForm.phone" @input="
                        addOrEditForm.phone = verifyfilter(
                            'number',
                            addOrEditForm.phone
                        )
                        " placeholder="请输入电话号码" style="width: 100%" clearable></el-input>
                </el-form-item>
                <el-form-item label="传真" prop="fax">
                    <el-input v-model="addOrEditForm.fax" @input="
                        addOrEditForm.fax = verifyfilter(
                            'char',
                            addOrEditForm.fax
                        )
                        " placeholder="请输入传真" style="width: 100%" clearable></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="addOrEditForm.email" @input="
                        addOrEditForm.email = verifyfilter(
                            'char',
                            addOrEditForm.email
                        )
                        " placeholder="请输入邮箱" style="width: 100%" clearable></el-input>
                </el-form-item>
                <el-form-item label="有效状态" prop="enabled">
                    <el-select v-model="addOrEditForm.enabled" :clearable="true" style="width: 100%" class="items"
                        placeholder="请选择有效状态">
                        <el-option v-for="(item, index) in enabledOptions" :key="index" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
        <div slot="footer" class="btnLine">
            <el-button size="mini" class="btnItem" @click="handleSave('01')">取消</el-button>
            <el-button size="mini" class="btnItem" @click="resetForm()">重置</el-button>
            <el-button size="mini" type="primary" class="btnItem" @click="submitChange" v-loading="btnLoading">
                保存
            </el-button>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        handleSave: {
            type: Function,
            required: true,
        },
        detailRow: {
            type: Object,
            required: true,
        },
        planType: {
            type: String,
            required: true,
        },
    },
    components: {
    },
    data() {
        return {
            btnLoading: false,
            isUploadFlag: false,
            enabledOptions: [
                {
                    label: '不启用',
                    value: '0'
                },
                {
                    label: '启用',
                    value: '1'
                }
            ],
            addOrEditForm: {
                account: "", //账号
                name: "", //用户名
                address: "", //地址
                email: "", //邮箱
                phone: "", //联系电话
                fax: "", //传真
                enabled: "1", //启用标志（0：不启用，1启用  
            },
            addOrEditRules: {
                account: [
                    { required: true, message: "请输入账号名", trigger: "blur" },
                ],
                name: [
                    { required: true, message: "请输入用户名", trigger: "blur" },
                ],
                phone: [
                    { required: true, message: "请输入电话号码", trigger: "blur" },
                    { min: 11, max: 11, message: '请输入11位电话号码', trigger: 'blur' }
                ],
            },
        };
    },
    computed: {

    },
    created() {
    },
    mounted() {
        if (this.planType == "02") {
            console.log('0000000000000', this.detailRow);
            this.addOrEditForm = JSON.parse(JSON.stringify(this.detailRow))
            this.$set(this.addOrEditForm, 'account', JSON.parse(JSON.stringify(this.detailRow.userName)))
            // this.addOrEditForm.account = 
            this.addOrEditForm.enabled = JSON.parse(JSON.stringify(this.detailRow.enabled + ''))
        }
    },
    methods: {
        // 重置
        resetForm() {
            this.$nextTick(() => {
                this.$refs.addOrEditForm.resetFields()
                })
        },
        //保存信息
        submitChange() {
            this.btnLoading = true;
            this.$refs.addOrEditForm.validate((valid) => {
                if (valid) {
                    let params = {
                        account: this.addOrEditForm.account,
                        name: this.addOrEditForm.name,
                        address: this.addOrEditForm.address,
                        email: this.addOrEditForm.email,
                        phone: this.addOrEditForm.phone,
                        fax: this.addOrEditForm.fax,
                        enabled: this.addOrEditForm.enabled,
                    };
                    //新增模式
                    if (this.planType == "01") {
                        this.$api.addCustomerAccount(params)
                            .then((res) => {
                                if (res.success) {
                                    this.$message.success("保存成功");
                                    this.handleSave("02");
                                } else {
                                    this.$message.error(res.msg);
                                }
                                this.btnLoading = false;
                            })
                            .catch((error) => {
                                this.btnLoading = false;
                            });
                        //编辑模式
                    } else if (this.planType == "02") {
                        params.id = this.detailRow.id;
                        this.$api.editCustomerAccount(params).then((res) => {
                            if (res.success) {
                                this.$message.success("编辑成功");
                                this.handleSave("02");
                            } else {
                                this.$message.error(res.msg);
                            }
                            this.btnLoading = false;
                        })
                            .catch((error) => {
                                this.btnLoading = false;
                            });
                    }
                } else {
                    this.$message.error("请完善信息");
                    this.btnLoading = false;
                }
            });
        },
    },
};
</script>
<style lang="less" scoped>
.mainPage {
    height: 100%;
    width: 100%;

    .content {
        padding: 20px;
        height: calc(100% - 95px);
        width: calc(100% - 40px);
        overflow: auto;
    }

    .btnLine {
        height: 49px;
        border-top: 1px solid gainsboro;
        line-height: 49px;
        text-align: right;

        .btnItem {
            margin: 0;
            margin-right: 10px;
        }
    }
}
</style>
